<template>
	<xbd-pages-content :title="title">
		<template #content>
			<view class="approval-detail">
				<view class="row">
					<view class="title">头像</view>
					<view class="content">
						<image v-if="info.visitor_avatar" class="avatar" @click="image_click(info.visitor_avatar)" :src="info.visitor_avatar | imgFormat"
							mode="aspectFit"></image>
						<text v-else>-</text>
					</view>
					<view class="icon"
						v-if="type !== '1' && (info.visitor_status==='passed' || info.visitor_status==='refused')">
						<image v-if="info.visitor_status==='passed'" src="../../static/images/meal/yes.svg" mode="">
						</image>
						<image v-else-if="info.visitor_status==='wait'" src="../../static/images/meal/stay.svg" mode="">
						</image>
						<image v-else-if="info.visitor_status==='refused'" src="../../static/images/meal/no.svg"
							mode="">
						</image>
						<image v-else-if="info.visitor_status==='pending'" src="../../static/images/meal/underway.png"
							mode="">
						</image>
					</view>
				</view>
				<view class="row">
					<view class="title">姓名</view>
					<view class="content">{{ info.visitor_name || "-" }}</view>
				</view>
				<view class="row">
					<view class="title">性别</view>
					<view class="content">{{ gender || "-" }}</view>
				</view>
				<view class="row">
					<view class="title">电话</view>
					<view class="content">{{ info.visitor_phone || "-" }}</view>
				</view>
				<view class="row">
					<view class="title">身份证</view>
					<view class="content">{{ info.visitor_idcard || "-" }}</view>
				</view>
				<view class="row">
					<view class="title">车牌号</view>
					<view class="content">{{ info.visitor_plate || "-" }}</view>
				</view>
				<view class="row">
					<view class="title">单位</view>
					<view class="content">{{ info.visitor_company || "-" }}</view>
				</view>
				<view class="row">
					<view class="title">随行人员</view>
					<view class="content">{{ info.visitor_together || "0" }}人</view>
				</view>
				<view class="row">
					<view class="title">被访人</view>
					<view class="content">{{ info.visitor_interviewee_name || "-" }}</view>
				</view>
				<view class="row">
					<view class="title">被访人电话</view>
					<view class="content">{{ info.visitor_interviewee_phone || "-" }}</view>
				</view>
				<view class="row">
					<view class="title">预约来访时间</view>
					<view class="content">{{ info.visitor_start_time | timeFormat('YYYY-MM-DD HH:mm') || "-" }}</view>
				</view>
				<view class="row">
					<view class="title">预约结束时间</view>
					<view class="content">{{ info.visitor_end_time | timeFormat('YYYY-MM-DD HH:mm') || "-" }}</view>
				</view>
				<view class="row">
					<view class="title">来访事由</view>
					<view class="content">{{ info.visitor_reason || "-" }}</view>
				</view>
				<view class="row">
					<view class="title">健康码</view>
					<view class="content">
						<image v-if="info.visitor_healthcode_img" class="img" :src="info.visitor_healthcode_img"
							mode="aspectFit" @click="image_click(info.visitor_healthcode_img)"></image>
						<text v-else>-</text>
					</view>
				</view>
				<view class="row">
					<view class="title">行程码</view>
					<view class="content">
						<image v-if="info.visitor_tourcode_img" class="img" :src="info.visitor_tourcode_img"
							mode="aspectFit" @click="image_click(info.visitor_tourcode_img)"></image>
						<text v-else>-</text>
					</view>
				</view>
				<view class="row">
					<view class="title">接种疫苗证明</view>
					<view class="content">
						<image v-if="info.visitor_vaccination_img" class="img" :src="info.visitor_vaccination_img"
							mode="aspectFit" @click="image_click(info.visitor_vaccination_img)"></image>
						<text v-else>-</text>
					</view>
				</view>
				<view class="row">
					<view class="title">核酸检测证明</view>
					<view class="content">
						<image v-if="info.visitor_monitor_img" class="img" :src="info.visitor_monitor_img"
							mode="aspectFit" @click="image_click(info.visitor_monitor_img)"></image>
						<text v-else>-</text>
					</view>
				</view>
				<view class="foot">
					<view
						v-if="type === '2' && (info.visitor_status === 'wait' || info.visitor_status === 'pending')"
						class="btns">
						<button class="draft" @click="draft">拒绝审批</button>
						<button class="upload" @click="pass">审批通过</button>
					</view>
				</view>
				<xbd-popup :isShow="showDialog" @dialogConfirm="dialogConfirm" @dialogCancel="dialogCancel">
					<template>
						<view class="draft_reason">
							<view class="Cancel_title">拒绝原因</view>
							<view class="uni-list">
								<radio-group @change="radioChange">
									<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items"
										:key="item.value">
										<view>
											<radio style="transform:scale(0.5)" :value="item.value" />
										</view>
										<view>{{item.value}}</view>
									</label>
								</radio-group>
								<view v-if="showReason" class="textareaBox">
									<uni-easyinput class="textarea" type="textarea" v-model="req.reason"
										placeholder="请输入拒绝原因：" :maxlength="30"></uni-easyinput>
								</view>
							</view>
						</view>
					</template>
				</xbd-popup>
			</view>
		</template>
	</xbd-pages-content>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		Visitor
	} from '@/api/index.js';
	export default {
		data() {
			return {
				id: '',
				title: '',
				type: '0', //接收页面跳转过来的值  判断下button的类型
				showDialog: false,
				draftResone: '',
				items: {},
				info: {},
				showReason:false,
				req: {
					id: '',
					state: "",
					reason: ""
				},
				flag: true,
				// department: [], //未审批部门
				option: { //传参控制页面审批提示
					title: "我的审批",
					pass: true,
					msg: ""
				},
			};
		},
		methods: {
			image_click(image) {
				dd.previewImage({
					current: 1,
					urls: [image],
				});
			},
			// 单选框
			radioChange(evt) {
				if(evt.detail.value === '其他原因'){
					this.req.reason = ''
					this.showReason = true
				}else{
					this.showReason =false
					this.req.reason = evt.target.value
				}
			},

			draft() {
				this.showDialog = true;
			},

			pass() {
				// console.log("审批通过")
				this.option.msg = "审批通过"
				this.passed()
			},
			dialogConfirm() {
				console.log(this.showReason,'this.showReason')
				if(!this.showReason){
					if(this.req.reason.length === 0){
						this.$showToast('请选择拒绝原因');
					}else{
						this.option.msg = "审批拒绝"
						this.option.pass = false
						this.refus()
						this.showDialog = false;
					}
					
				}else{
					//弹出框确认操作
					if (this.req.reason.length!==0) {
						console.log(this.req.reason.length,'this.req.reason.length')
						this.showDialog = false;
						this.option.msg = "审批拒绝"
						this.option.pass = false
						this.refus()
					}else{
						this.$showToast('请输入拒绝原因');
					}
				}
				
				console.log("确认")
			},
			dialogCancel() {
				console.log("取消")
				this.showDialog = false;
			},
			// 初始化数据
			async init(id) {
				try {
					this.$showLoading('加载中');
					const res = await Visitor.getVisitorDetail(id);
					console.log(res)
					// res.data.visitor_process.forEach(item => {
					// 	if (!item.name.length) {
					// 		this.department.push(item.identity)
					// 	}

					// })
					this.info = res.data
					console.log(this.info)
					uni.hideLoading();
				} catch (e) {
					console.log(e);
				}
			},
			async initReason() {
				try {
					this.$showLoading('加载中');
					const res = await Visitor.getVisitorReason();
					console.log(res)
					// if (res.success) {
					// 	this.info = res.data
					// }
					this.items = res.data.list
					uni.hideLoading();
				} catch (e) {
					console.log(e);
				}
			},
			// 拒绝申请
			async refus() {
				this.req.state = 'refused'
				if (this.flag) {
					try {
						this.$showLoading('加载中');
						this.flag = false
						const res = await Visitor.visitorAudit(this.req);
						console.log(res)
						uni.hideLoading();
						if (res.success) {
							if(res.code===9527){
								uni.showToast({
									title: res.msg,
									icon: 'none',
								})
								uni.navigateBack({
									delta: 1
								});
							}else{
								uni.redirectTo({
									url: `../status/status?option=${JSON.stringify(this.option)}`
								});
							}
							// uni.$emit('visitorAudit', {
							// 	id: this.id,
							// 	state: 'refused'
							// });
							// uni.redirectTo({
							// 	url: `../status/status?option=${JSON.stringify(this.option)}`
							// });
						} else {
							this.flag = true
							this.$showToast(res.msg);
						}
					} catch (e) {
						this.flag = true
						uni.hideLoading();
						console.log(e);
					}
				}
			},
			// 审批通过
			async passed() {
				this.req.state = 'passed'
				if (this.flag) {
					try {
						this.flag = false
						this.$showLoading('加载中');
						const res = await Visitor.visitorAudit(this.req);
						console.log(res,'res')
						uni.hideLoading();
						if (res.success) {
							// this.flag = true
							// try {
							// 	const {
							// 		data: {
							// 			data
							// 		}
							// 	} = await Visitor.getVisitorDetail(this.id)
							// 	uni.$emit('visitorAudit', {
							// 		id: this.id,
							// 		state: 'passed'
							// 	});
							// 	uni.redirectTo({
							// 		url: `../status/status?option=${JSON.stringify(this.option)}`
							// 	});
							// } catch (e) {
							// 	uni.hideLoading();
							// 	console.log(e);
							// }
							if(res.code===9527){
								uni.showToast({
									title: res.msg,
									icon: 'none',
								})
								uni.navigateBack({
									delta: 1
								});
							}else{
								uni.redirectTo({
									url: `../status/status?option=${JSON.stringify(this.option)}`
								});
							}


						} else {
							this.flag = true
							this.$showToast(res.msg);
						}
					} catch (e) {
						this.flag = true
						uni.hideLoading();
						console.log(e);
					}
				}
			},

		},
		computed: {
			...mapState(['userInfo']),
			statusImg() {
				if (this.info.visitor_status === 'pending') {
					return require('@/static/images/meal/stay.svg');
				} else if (this.info.visitor_status === 'passed') {
					return require('@/static/images/meal/yes.svg');
				} else if (this.info.visitor_status === 'refused') {
					return require('@/static/images/meal/no.svg');
				}
			},
			gender() {
				if (this.info.visitor_gender) {
					if (this.info.visitor_gender === 'female') {
						return '女';
					} else {
						return '男';
					}
				} else {
					return '';
				}
			},
			// showBtn() {
			// 	console.log(this.department)
			// 	let flag = false;
			// 	if (!flag) {

			// 		if (this.department[0] === '被访人') {
			// 			flag = true
			// 		} else if (this.userInfo.user_permission.indexOf(this.department[0]) === -1) {
			// 			flag = false
			// 		} else {
			// 			flag = true

			// 		}
			// 	}
			// 	return flag;
			// }
		},
		onLoad(res) {
			console.log(res)
			this.type = res.type
			this.id = res.id;
			this.req.id = res.id
			this.title = res.title;
			uni.setNavigationBarTitle({
				title: this.title
			});

			this.init(res.id);
			this.initReason()
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .enn-dialog__container {
		padding-top: 0 !important;
		border-radius: 0 !important;
	}

	::v-deep .enn-dialog__content {
		padding: 0 !important;
	}

	::v-deep .uni-easyinput__content-textarea {
		min-height: 63px;
		height: 63px;

		box-sizing: border-box;
	}

	/* #ifndef APP-PLUS || H5 */
	::v-deep .enn-dialog__content {
		padding: 0 30rpx;
	}

	/* #endif */
	.approval-detail {
		padding: 20px 50rpx;

		background-color: #FFFFFF;

		.row {
			position: relative;
			display: flex;
			justify-content: space-between;

			margin-bottom: 20px;

			font-size: 32rpx;

			color: $uni-text-color;

			.title {
				width: 200rpx;
				text-align: left;
				color: #394954 ;
			}

			.content {
				width: 400rpx;
				word-break: break-all;
				text-align: left;
				font-size: 28rpx;
				.avatar {
					width: 200rpx;
					height: 200rpx;
				}

				.img {
					width: 200rpx;
					height: 200rpx;
				}
			}

			.statusbg {
				width: 100rpx;
				height: 100rpx;

				.status-img {
					width: 100rpx;
					height: 100rpx;
				}
			}
		}

		.icon {
			position: absolute;
			top: -10px;
			right: 0;

			image {
				width: 150rpx;
				height: 150rpx;
			}

		}

		.xbd-button-group {
			margin-top: 35px;
		}

		.draft_reason {
			position: relative;
			.textareaBox{
				padding: 0rpx 50rpx  20rpx 50rpx;
			}
			.textarea{
				box-sizing: border-box;
				// margin:10px 30rpx 10px 30rpx;
				width: 440rpx;
				text-align: left;
				font-size: 28rpx;
			}
			.Cancel_title {
				background-color: #3D86E2;
				box-sizing: border-box;
				// margin:10px 30rpx 10px 30rpx;
				height: 64rpx;
				width: 100%;
				line-height: 64rpx;
				text-align: center;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}

		.flow {
			
			.type:last-child {
				.line2 {
					height: 0 !important;
				}
			}
		}

		.title_low {
			font-size: 32rpx;
			color: #194769;
			font-weight: 900;
			margin-bottom: 20px;
		}

		.type {
			position: relative;
			display: flex;

			.radio {
				width: 20rpx;
				height: 20rpx;
				background-color: #FAC52A;
				border-radius: 10rpx;
			}

			.line2 {
				width: 2rpx;
				height: 100rpx;
				background-color: #FAC52A;
				margin-left: 9rpx;
			}

			.msg {
				.reason {
					word-break: break-all;
					font-size: 32rpx;
					margin-top: 30rpx;
					margin-left: 20rpx;
					color: #999999;
				}
			}

			.msg_box {
				display: flex;
				justify-content: space-between;
				position: absolute;
				width: 610rpx;
				top: -5px;
				left: 40rpx;
				display: flex;
				color: #999999;

				.msg_tag {
					display: flex;
					font-size: 32rpx;

					.name {
						margin-right: 20rpx;


						.people {
							font-size: 32rpx;
							color: #194769;
						}

					}

					.no {
						color: #FF7543;
					}

					.yes {
						color: #39D4D1;
					}

				}

				.date {
					font-size: 28rpx;

					.date_text {
						margin-left: 20rpx;
					}
				}
			}

		}

		.foot {
			box-sizing: border-box;
			padding: 20upx 4upx;
			margin-bottom: 20px;
			margin-top: 30px;

			.btns {
				display: flex;
				justify-content: space-between;

				button {
					width: 300rpx;
					height: 30px;
					line-height: 30px;
					font-size: 32rpx;
					box-sizing: border-box;
				}

				.draft {
					color: #FFFFFF;
					margin-right: 50rpx;
					background: url(../../static/images/meal/gary.png) no-repeat;
					background-size: 100% 100%;
				}

				.upload {
					background: url(../../static/images/common/bluebg.png) no-repeat;
					background-size: 100% 100%;
					color: $uni-text-color-inverse;
				}

				.revocation {
					background: url(../../static/images/common/bluebg.png) no-repeat;
					background-size: 100% 100%;
					color: $uni-text-color-inverse;
					margin-left: 180rpx;
				}
			}
		}

		.uni-list {
			font-size: 24rpx;
		}

		.uni-list-cell-pd {
			margin-left: 50rpx;
			display: flex;
			align-items: center;
		}
	}
</style>
